import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import '../../features/Phone';

const renderItem = (item, navigation) => {
    return (
        <TouchableOpacity
            activeOpacity={0.8}
            onPress={()=>{navigation.navigate('Perfume',{item: item})}}
        >
            <View
                key={item.nose_id}
                style={{
                    width: w*0.8,
                    backgroundColor: 'white',
                    alignItems: 'center',
                    borderWidth: 1,
                    borderColor: 'lightgray',
                    padding: 10,
                    marginTop: 20
                }}
            >
                <Image
                    source={{uri:item.nose_logo}}
                    style={{width:p2d(100), height:p2d(150)}}
                />
                <Text style={{fontSize:16}}>{item.nose_name}</Text>
                <Text style={{fontSize:14, margin:5, color:'#696969'}}>{item.nose_score}分 {item.nose_num}人评价</Text>
                <Text style={{fontSize:13, color:'gray'}}>{item.nose_evaluation}</Text>
            </View>
        </TouchableOpacity>
    )
};

const Recommend = ({navigation}) => {
    const [data,setData] = useState([]);
    useEffect(()=>{
        fetch('http://175.27.190.73:9000/noseHouse')
            .then(res=>res.json())
            .then(res=>{
                setData(res.allNose);
            })
    },[]);

    return (
        <View style={{width:w, backgroundColor:'#f0f0f0', alignItems:'center'}}>
            <FlatList
                data={data}
                nestedScrollEnabled={true}
                showsVerticalScrollIndicator={false}
                keyExtractor={(item) => item.nose_id}
                renderItem={({item})=>{
                    return renderItem(item,navigation);
                }}
            />
        </View>
    )
}

export default Recommend